<template>
  <div class="servicePackagePriceConfig padding_20">
    <el-input v-model="searchCondition"
              placeholder="请输入服务包名称"
              class="w-200"
              clearable
              @clear="initTableData" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="showEditDialog">新 增</el-button>
    <!--工作室列表-->
    <Table stripe
           border
           :columns="titles"
           :data="servicePackagePriceConfigList"
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="showEditDialog(index)">编辑</span>
        <span @click="deleteServicePackagePriceConfig(index)">删除</span>
      </template>
    </Table>
    <!--分页-->
    <Page :current.sync="currentPage"
          :total="totals"
          :page-size="pageSize"
          @on-change="handleChange"
          show-total />
    <Modal v-model="editServicePackagePrice"
           fullscreen
           :loading="loading"
           @on-ok="saveData"
           title="价格模板配置">
      <div style="background:#eee;padding: 20px">
        <Card :bordered="false">
          <p slot="title">基本信息</p>
          <div>
            名称： <Input v-model="servicePackagePrice.name"
                   placeholder="输入名称"
                   style="width: 300px" />
            价格： <Input v-model="servicePackagePrice.price"
                   placeholder="输入价格"
                   style="width: 100px" />
            活动说明： <Input v-model="servicePackagePrice.activityTips"
                   placeholder="输入活动说明"
                   style="width: 400px" />
            活动截止日期：
            <DatePicker type="date"
                        v-model="servicePackagePrice.activityEndDateStr"
                        placeholder="选择日期"
                        style="width: 200px"></DatePicker>
          </div>
          <div style="margin-top: 10px;">
            医院:
            <Select v-model="servicePackagePrice.hospitalId"
                    @on-change="initDepartment"
                    filterable
                    remote
                    :remote-method="remoteMethod1"
                    :loading="loading1"
                    class="input_1">
              <Option v-for="(option, index) in hospitalList"
                      :value="option.id"
                      :key="index">{{option.name}}</Option>
            </Select>
            科室:
            <Select v-model="servicePackagePrice.departmentId"
                    style="width:200px">
              <Option v-for="item in departmentList"
                      :value="item.id"
                      :key="item.id">{{ item.name }}</Option>
            </Select>
            工作室:
            <Select v-model="servicePackagePrice.studioId"
                    filterable
                    remote
                    :remote-method="initStudioList"
                    :loading="loading2"
                    class="input_1">
              <Option v-for="(option, index) in studioList"
                      :value="option.id"
                      :key="index">{{option.name}}</Option>
            </Select>
          </div>
        </Card>

        <Card :bordered="false">
          <div>
            <p slot="title">医生价格配置</p>
            <Button icon="ios-add"
                    class="btn_1"
                    @click="addDetailTitle">新增</Button>
            <Table stripe
                   border
                   :columns="detailTitle"
                   :data="servicePackagePrice.detailList">
              <template slot-scope="{row,index}"
                        slot="action">
                <span @click="removeData(index)">删除</span>
              </template>
            </Table>
          </div>
        </Card>
      </div>
    </Modal>

    <Modal v-model="confirmModal"
           title="是否删除"
           :loading="loading"
           @on-ok="toDelete">
      <p>您确定删除该条数据吗？</p>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "servicePackagePriceConfig",
    data () {
      let vm = this;
      return {
        searchCondition: "",
        editServicePackagePrice: false,
        deleteIndex: null,
        confirmModal: false,
        loading: false,
        loading2: false,
        loading1: false,
        currentPage: 1,
        totals: 0,
        pageSize: 10,
        titles: [
          {
            title: '服务包名称',
            key: 'name'
          },
          {
            title: '医院',
            key: 'hospitalName'
          },
          {
            title: '科室',
            key: 'departmentName'
          },
          {
            title: '工作室',
            key: 'studioName'
          },
          {
            title: '服务包价格',
            key: 'price',
            width: 120
          },
          {
            title: '活动说明',
            key: 'activityTips'
          },
          {
            title: '活动截止日期',
            key: 'activityEndDate',
            render: (h, params) => {
              if (params.row.activityEndDate) {
                return h('span',
                  this.commonFunction.timestampFormat(new Date(params.row.activityEndDate), 'yyyy-MM-dd hh:mm:ss'));
              } else {
                return h('span', "");
              }
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 100
          }
        ],
        detailTitle: [
          {
            title: '职称',
            key: 'doctorTitleId',
            render: (h, params) => {
              let data = this.doctorTitles;
              return h('div', [
                h(
                  "Select", {
                  props: {
                    multiple: true,
                    value: params.row.doctorTitleIds
                  },
                  on: {
                    'on-open-change': (event) => {
                      if (event === false && params.row.temp) {
                        vm.servicePackagePrice.detailList[params.index].doctorTitleIds = params.row.temp;
                      }
                    },
                    'on-change': (event) => {
                      params.row.temp = event;
                    }
                  },
                },
                  data.map(function (item) {
                    return [h(
                      "Option",
                      {
                        props: {
                          value: item.id,
                          key: item.id,
                        }
                      }, item.name)]
                  })
                )
              ]);
            }
          },
          {
            title: '医院等级',
            key: 'hospitalLevel',
            render: (h, params) => {
              let data = this.hospitalLevels;
              return h('div', [
                h(
                  "Select", {
                  props: {
                    multiple: true,
                    value: params.row.hospitalLevels
                  },
                  on: {
                    'on-open-change': (event) => {
                      if (event === false && params.row.tempLevel) {
                        vm.servicePackagePrice.detailList[params.index].hospitalLevels = params.row.tempLevel;
                      }
                    },
                    'on-change': (event) => {
                      params.row.tempLevel = event;
                    }
                  },
                },
                  data.map(function (item) {
                    return [h(
                      "Option",
                      {
                        props: {
                          value: item.id,
                          key: item.id,
                        }
                      }, item.name)]
                  })
                )
              ]);
            }
          },
          {
            title: '关系',
            key: 'relationship',
            render: (h, params) => {
              let data = this.relationships;
              return h('div', [
                h("Select", {
                  props: {
                    multiple: false,
                    value: params.row.relationship
                  },
                  on: {
                    'on-change': (event) => {
                      vm.servicePackagePrice.detailList[params.index].relationship = event;
                    }
                  },
                },
                  data.map(function (item) {
                    return [h(
                      "Option",
                      {
                        props: {
                          value: item.value,
                          key: item.key,
                        }
                      }, item.value
                    )]
                  })
                )
              ]);
            }
          },
          {
            title: '是否必须',
            key: 'isRequired',
            render: (h, params) => {
              let data = this.isRequireds;
              return h('div', [
                h("Select", {
                  props: {
                    multiple: false,
                    value: params.row.isRequired
                  },
                  on: {
                    'on-change': (event) => {
                      vm.servicePackagePrice.detailList[params.index].isRequired = event;
                    }
                  },
                },
                  data.map(function (item) {
                    return [h(
                      "Option",
                      {
                        props: {
                          value: item.value,
                          key: item.key,
                        }
                      }, item.key
                    )]
                  })
                )
              ]);
            }
          },
          {
            title: '服务级别',
            key: 'serviceLevel',
            render: (h, params) => {
              let data = this.serviceLevels;
              return h('div', [
                h("Select", {
                  props: {
                    multiple: false,
                    value: params.row.serviceLevel
                  },
                  on: {
                    'on-change': (event) => {
                      vm.servicePackagePrice.detailList[params.index].serviceLevel = event;
                    }
                  },
                },
                  data.map(function (item) {
                    return [h(
                      "Option",
                      {
                        props: {
                          value: item.value,
                          key: item.key,
                        }
                      }, item.key
                    )]
                  })
                )
              ]);
            }
          },
          {
            title: '单次服务价格',
            key: 'price',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.price
                },
                on: {
                  'on-blur': function (event) {
                    vm.servicePackagePrice.detailList[params.index].price = event.target.value;
                  }
                }
              });
            }
          },
          {
            title: '备注',
            key: 'remark',
            render: (h, params) => {
              return h('Input', {
                props: {
                  value: params.row.remark
                },
                on: {
                  'on-blur': function (event) {
                    vm.servicePackagePrice.detailList[params.index].remark = event.target.value;
                  }
                }
              });
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        servicePackagePriceConfigList: [],
        doctorTitles: [],
        hospitalList: [],
        departmentList: [],
        studioList: [],
        hospitalLevels: [],
        serviceLevels: [
          { value: 1, key: "专家" },
          { value: 2, key: "医生" },
          { value: 3, key: "助理" },
          { value: 4, key: "社区义工" },
        ],
        isRequireds: [
          { value: 1, key: "必须" },
          { value: 0, key: "非必须" }
        ],
        relationships: [
          { value: ">", key: ">" },
          { value: ">=", key: ">=" },
          { value: "<", key: "<" },
          { value: "<=", key: "<=" },
          { value: "=", key: "=" }],
        servicePackagePrice: {
          id: null,
          name: null,
          price: null,
          activityTips: null,
          activityEndDate: null,
          activityEndDateStr: null,
          hospitalId: null,
          departmentId: null,
          hospitalName: null,
          departmentName: null,
          studioName: null,
          studioId: null,
          detailList: []
        }
      }
    },
    created () {
      this.initTableData();
      this.initDoctorTitles();
      this.initHospitalLevels();
    },
    methods: {
      handleQuery() {
        this.pageIndex = 0
        this.initTableData()
      },
      initTableData () {
        this.post(this.api.servicePackage.getConfigPrice, {
          "pageIndex": this.pageIndex,
          "pageSize": this.pageSize,
          "searchCondition": this.searchCondition
        }).then((res) => {
          if (res.data.code === '200') {
            this.servicePackagePriceConfigList = res.data.object;
            this.totals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      handleChange (page) {
        this.pageIndex = page - 1;
        this.initTableData();
      },
      initDoctorTitles () {
        this.post(this.api.doctorTitle.getPageAPP, { "pageIndex": 0, "pageSize": 100 }).then((res) => {
          if (res.data.code === '200') {
            this.doctorTitles = res.data.object;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      initHospitalLevels () {
        this.post(this.api.hospitalLevel.getHospitalLevel, {}).then((res) => {
          if (res.data.code === '200') {
            this.hospitalLevels = res.data.object;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      initDepartment () {
        this.post(this.api.department.getDepartmentPageAPP, { "hospitalId": this.servicePackagePrice.hospitalId }).then((res) => {
          this.departmentList = res.data.object;
        });
        this.initStudioList("");
      },
      deleteServicePackagePriceConfig (index) {
        this.deleteIndex = index;
        this.confirmModal = true;
      },
      remoteMethod1 (query) {
        if (query !== '') {
          this.loading1 = true;
          this.post(this.api.searchHospital, { "pageSize": 20, "pageStart": 0, "name": query }).then((res) => {
            this.hospitalList = res.data.object;
          });
        } else {
          this.hospitalList = [];
        }
        this.loading1 = false;
      },
      initStudioList (query) {
        if (query != "" || this.servicePackagePrice.hospitalId != null) {
          this.loading2 = true;
          this.post(this.api.wdStudio.getHospitalStudio, {
            "name": query,
            "hospitalId": this.servicePackagePrice.hospitalId
          }).then((res) => {
            this.studioList = res.data.object;
          });
        } else {
          this.studioList = [];
        }
        this.loading2 = false;
      },
      showEditDialog (index) {
        let vm = this;
        if (!isNaN(index)) {
          let id = this.servicePackagePriceConfigList[index].id;
          this.post(this.api.servicePackage.getServicePackagePriceDetail, { "id": id }).then((res) => {
            if (res.data.code === '200') {
              vm.servicePackagePrice = res.data.object;
              vm.editServicePackagePrice = true;
            } else {
              this.$Message.error(res.data.message);
            }
          });
        } else {
          vm.servicePackagePrice = {
            id: null,
            name: null,
            price: null,
            activityTips: null,
            activityEndDate: null,
            activityEndDateStr: null,
            detailList: []
          };
          vm.editServicePackagePrice = true;
        }
      },
      isTitleRepeat (id) {
        for (let i = 0; i < this.servicePackagePrice.detailList.length; i++) {
          if (id === this.servicePackagePrice.detailList[i].doctorTitleId) {
            return true;
          }
        }
        return false;
      },
      saveData () {
        if (!this.servicePackagePrice.price) {
          this.$Message.error("服务包价格不能为空");
        }
        this.post(this.api.servicePackage.saveServicePackagePriceConfig, this.servicePackagePrice).then((res) => {
          if (res.data.code === '200') {
            this.initTableData();
            this.$Message.info("修改成功");
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      removeData (index) {
        let newData = [];
        for (let i = 0; i < this.servicePackagePrice.detailList.length; i++) {
          if (index === i) {
            continue;
          }
          newData.push(this.servicePackagePrice.detailList[i]);
        }
        this.servicePackagePrice.detailList = newData;
      },
      addDetailTitle () {
        let obj = {
          doctorTitleIds: [],
          price: null,
          remark: null
        };
        this.servicePackagePrice.detailList.push(obj);
      },
      toDelete () {
        this.confirmModal = false;
        if (!isNaN(this.deleteIndex)) {
          let obj = this.servicePackagePriceConfigList[this.deleteIndex];
          if (obj) {
            this.post(this.api.servicePackage.deleteServicePackagePriceConfig, { "id": obj.id }).then((res) => {
              if (res.data.code === '200') {
                this.$Message.success("保存成功");
                this.initTableData();
              } else {
                this.$Message.error(res.data.message);
              }
            });
          }
        }
      }
    }
  }
</script>

<style scoped>
</style>
